<template>
  <div class="main">
    <mianbao :title="title"></mianbao>

    <div class="hzdata">
      <el-row class="header"> 患者信息</el-row>
      <el-row class="content" :gutter="20">
        <el-col :span="8">
          <div>
            <label>患者姓名</label>
            <p>{{ yyData.patients_name }}</p>
          </div>
          <div>
            <label>证件类型</label>
            <p>身份证</p>
          </div>
          <div>
            <label>微信昵称</label>
            <p>{{ yyData.wx_name }}</p>
          </div>
          <div>
            <label>就诊人地址</label>
            <p>{{ yyData.wx_site }}</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <label>就诊卡号</label>
            <p>{{ yyData.card_numer }}</p>
          </div>
          <div>
            <label>证件号码</label>
            <p>{{ yyData.patients_id_number }}</p>
          </div>
          <div>
            <label>手机号码</label>
            <p>{{ yyData.patients_phone }}</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="imgs">
            <label>患者头像</label>
            <p>
              <el-image :src="yyData.wx_img" flt="cover" />
            </p>
          </div>
          <div>
            <label>关系</label>
            <p v-if="yyData.patients_identity_information == 1">本人</p>
            <p v-else-if="yyData.patients_identity_information == 2">父母</p>
            <p v-else-if="yyData.patients_identity_information == 3">夫妻</p>
            <p v-else="yyData.patients_identity_information == 4">子女</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="yydata">
      <el-row class="header"> 预约信息</el-row>
      <el-row :gutter="20" class="content">
        <el-col :span="8">
          <label>{{ label[0] }}</label>
          <p>成都市第三人民医院</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[1] }}</label>
          <p>{{ yyData.site }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[2] }}</label>
          <p>
            {{ yyData.department_one_name }}-{{ yyData.department_two_name }}
          </p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[3] }}</label>
          <p>{{ yyData.name }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[4] }}</label>
          <p>{{ yyData.doctor_job }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[5] }}</label>
          <p>{{ yyData.reser_type }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[6] }}</label>
          <p>{{ yyData.startDate }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[7] }}</label>
          <p>{{ yyData.startTime }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[8] }}</label>
          <p>{{ yyData.price }}</p>
        </el-col>
        <el-col :span="8">
          <label>{{ label[9] }}</label>
          <p>{{ yyData.creadteDate }}</p>
        </el-col>
        <template> </template>

        <el-col :span="8" v-if="yyData.rt_status == 2">
          <label>{{ label[10] }}</label>
          <p>已取消</p>
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 1">
          <label>{{ label[10] }}</label>
          <p>已就诊</p>
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 1">
          <label>就诊时间</label>
          <p>{{ yyData.endTime }}</p>
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 0">
          <label>就诊状态</label>
          <p>未就诊</p>
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 0">
          <label>确定就诊</label>
          <el-switch
            v-model="values"
            active-text="已就诊"
            inactive-text="未就诊"
            :active-value="1"
            :inactive-value="0"
          />
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 2">
          <label>{{ label[11] }}</label>
          <p>{{ yyData.cancel }}</p>
        </el-col>
        <el-col :span="8" v-if="yyData.rt_status == 2">
          <label>{{ label[12] }}</label>
          <p>{{ yyData.endDate }}</p>
        </el-col>
      </el-row>
      <el-row class="int">
        <label>挂号备注</label>
        <el-input
          v-model="yyData.content"
          :rows="2"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-row>
      <el-row class="int int-btn">
        <label></label>
        <el-button type="primary" size="large" @click="baocun">保存</el-button>
        <el-button type="primary" plain size="large" @click="quxiao"
          >取消</el-button
        >
      </el-row>
    </div>
  </div>
</template>
<script>
import mianbao from "coms/wxq/mianbao.vue";
import { useRoute, useRouter } from "vue-router";
import storege from "../../utils/storege";
import { amendRerve } from "../../utils/api/reserve_wxq";
import tishi from "../../utils/xiaoxitishi";
import { ref, reactive, toRefs, computed, watch, onUnmounted } from "vue";

export default {
  props: [],
  components: { mianbao },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      title: "预约详情",
      yyData: {},
      label: [
        "就诊医院",
        "医院地址",
        "就诊科室",
        "就诊医生",
        "医生职称",
        "挂号类型",
        "门诊时间",
        "候诊时间",
        "挂号费",
        "预约时间",
        "就诊状态",
        "取消原因",
        "取消时间",
      ],
      values: null,
    });
    if (route.params.list) {
      data.yyData = JSON.parse(route.params.list);
    } else {
      data.yyData = storege.getStorage("yyData");
    }
    data.values = data.yyData.rt_status;
    console.log(data.yyData);
    if (route.params.list) {
      console.log(111);
      storege.setStorage("yyData", route.params.list);
    }
    let host = "http://localhost:3000/upload/";
    data.yyData.wx_img = host + data.yyData.wx_img;
    onUnmounted(() => {
      storege.removeStorage("yyData");
    });
    const baocun = () => {
      let status = data.values;
      let id = data.yyData.rt_id;
      let obj = {
        status,
        id,
      };
      console.log(data.yyData.rt_status);
      amendRerve(obj).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          tishi.open2("修改成功");
        } else {
          tishi.open3("修改失败");
        }
      });
      router.push("/home/bookedManage/booking");
    };
    const quxiao = () => {
      router.push("/home/bookedManage/booking");
    };
    return { ...toRefs(data), quxiao, baocun };
  },
};
</script>
<style lang="scss" scoped>
.gongg {
  width: 100%;
  height: 60px;
  background-color: #f0f7f9;
  padding: 0 24px;
  line-height: 60px;
  color: #0066ff;
  font-size: 18px;
  font-weight: 600;
}
.main {
  width: 100%;
  .hzdata {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    .header {
      @extend .gongg;
    }
    .content {
      padding: 24px 36px;

      .el-col {
        display: flex;
        flex-direction: column;

        div {
          display: flex;
          height: 60px;
          align-items: center;
          label {
            width: 120px;
            color: #999;
          }
        }
        .imgs {
          height: 120px;
          p {
            width: 80px;
            height: 80px;
            background-color: #eee;
            border-radius: 50%;
            overflow: hidden;
          }
          .el-image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .yydata {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 32px;
    .header {
      @extend .gongg;
    }
    .content {
      padding: 24px 36px;
      .el-col {
        height: 60px;
        display: flex;
        align-items: center;
        line-height: 1;
        label {
          width: 120px;
          color: #999;
        }
        p {
          margin: 0;
        }
      }
    }
  }
  .int {
    display: flex;
    padding: 0 36px 24px;

    label {
      width: 120px;
    }
    .el-textarea {
      width: 60%;
    }
  }
  .int-btn {
    margin-top: 16px;
    .el-button {
      padding: 12px 36px;
    }
  }
}
</style>
